<template>
  <div id="root">
    <div id="ro">
        <span @touchstart="backClick"></span>
        <div>
        <h1>注册</h1>
        </div>
    </div>

    <div class="spage">
      <div class="input-group" id="account">
        <span class="fa fa-user-circle"></span>
        <div class="input-control">
          <input type="text" placeholder="请输入邮箱/手机号" v-model="account" @input="timeShowBtn">
          <span class="fa fa-times-circle" v-show="timesShow" @touchstart="clearBtn"></span>
        </div>
      </div>
      <div class="input-group" id="psw">
        <span class="fa fa-lock"></span>
        <div class="input-control" v-if="eyeShow">
          <input type="text" placeholder="请输入密码(不少于6位)" v-model="psw">
          <span class="fa fa-eye-slash" v-show="!eyeShow" @touchstart="eyeShowBtn"></span>
          <span class="fa fa-eye" v-show="eyeShow" @touchstart="eyeShowBtn" style="color:#FF6F6D"></span>
        </div>
        <div class="input-control" v-if="!eyeShow">
          <input type="password" placeholder="请输入密码(不少于6位)" v-model="psw">
          <span class="fa fa-eye-slash" v-show="!eyeShow" @touchstart="eyeShowBtn"></span>
          <span class="fa fa-eye" v-show="eyeShow" @touchstart="eyeShowBtn" style="color:#FF6F6D"></span>
        </div>
      </div>
      <div class="input-group" id="confirm">
        <span class="fa fa-lock"></span>
        <div class="input-control" v-if="eyeShowConfirm">
          <input type="text" placeholder="请再次输入密码" v-model="confirm">
          <span class="fa fa-eye-slash" v-show="!eyeShowConfirm" @touchstart="confirmEyeShowBtn"></span>
          <span class="fa fa-eye" v-show="eyeShowConfirm" @touchstart="confirmEyeShowBtn" style="color:#FF6F6D"></span>
        </div>
        <div class="input-control" v-if="!eyeShowConfirm">
          <input type="password" placeholder="请再次输入密码" v-model="confirm">
          <span class="fa fa-eye-slash" v-show="!eyeShowConfirm" @touchstart="confirmEyeShowBtn"></span>
          <span class="fa fa-eye" v-show="eyeShowConfirm" @touchstart="confirmEyeShowBtn" style="color:#FF6F6D"></span>
        </div>
      </div>

      <div id="login-div">
        <button @touchstart="registBtnClick">注册</button>
      </div>

    </div>


  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  data:function(){
    return{
      timesShow:false,
      account:"",
      eyeShow:false,
      psw:"",
      confirm:"",
      eyeShowConfirm:false,
    }
  },
  components:{
  },
  methods:{
    timeShowBtn:function(){
      if(this.account!=""){
          this.timesShow = true;
      }else{
        this.timesShow = false;
      }
    },
    clearBtn:function(){
      this.account = "";
      this.timesShow = false;
    },
    eyeShowBtn:function(){
      this.eyeShow = !this.eyeShow;
    },
    confirmEyeShowBtn:function(){
      this.eyeShowConfirm = !this.eyeShowConfirm;
    },
    backClick:function(){
      this.$store.commit("backPath");
    },
    registBtnClick:function(){
      if(this.account == ""){
        layer.tips("用户名不能为空","#account",{tips:1});
      }else if(this.psw == ""||this.psw.length<6){
        layer.tips("密码至少为6位","#psw",{tips:1});
      }else if(this.psw != this.confirm){
        layer.tips("两次密码输入不一致", "#confirm", { tips: 3 });
      }else{
        var paramArr = {
          account:this.account,
          psw:this.psw
        };
        this.http.post("/api/users/regist",paramArr)
        .then(res=>{
          if(res.data.err==1){
              layer.msg(res.data.msg,{time:1500});
          }else if(res.data.err==0){
              layer.msg(res.data.msg,{time:1500});
              this.backClick();
          }
        });
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
  }
  #ro{
    height:44px;
    background-color:#F8F8F8;
    display:flex;
    padding:0 25px 0 10px;
    border-bottom:1px solid #dedede;
    margin-bottom:40px;
  }
  #ro>span{
    margin-top: 12px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image:url("/static/img/logo/angle-left.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden;
    vertical-align:middle;
  }
  #ro>div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow:1;
    text-align:center;
    margin:0 30px;
  }
  #ro h1{
    display:inline-block;
    font-size: 16px;
    color: #4a4a4a;
  }
  .input-group{
    background-color:white;
    border-bottom:solid 1px #FFA6A4;
    display:flex;
    align-items:center;
    height:42px;
    padding:5px 15px;
    color:#C9C9C9;
  }
  .input-control{
    flex-grow:1;
    margin-left:8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .input-control input{
    width:90%;
    border:none;
  }
  .spage{
    padding:0 8px;
  }
  #login-div{
    text-align:center;
    margin-top:30px;
  }
  #login-div button{
    background:linear-gradient(to bottom,#F45748,#F56047,#F87D43,#FA8C41);
    border-radius:5px;
    border:none;
    color:white;
    width:100%;
    height:40px;
  }
</style>
